// react 中的组件分为 函数组件和组件
// 组件的后缀统一使用.jsx,方便和js 文件做区分

// 创建函数组件
// 01: 函数组件特点: 无状态, 无生命周期, 无this, 有hooks辅助钩子函数,面向过程
// 02: 函数组件的组件名必须大写
// 03: 函数组件必须有返回值, 返回值为jsx dom 结构, 相当于vue组件中的template定义标签部分
// 04: 函数组件中的事件处理函数可以写在函数组件外,但是不建议, 因为一般事件处理中涉及使用hooks,
// hooks 辅助函数的特点是只能在函数组件内使用, 或者其他hooks 辅助函数内使用
// 05: 事件对象同类组件事件对象一样,都是合成事件对象

// const handleClickFn = () => {
//     console.log('函数事件');
//     // 使用hooks不能写在函数组件外
// }
const Myfun = (props) => {
    // console.log('this', this);
    // console.log('props', props);

    // 定义事件处理函数
    const handleClickFn = (e) => {
        console.log('函数事件');
        console.log('e', e);
    }
    return (<div>
        <p onClick={handleClickFn}>
            我是函数组件--{props.username1}
        </p>
    </div>)
}

export default Myfun
